<template>
  <div>
    <!-- 查询区域 -->
    <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 12px;">
      <el-input v-model="searchForm.subject" placeholder="请输入会议名称" style="width: 200px;" clearable />
      <el-button type="primary" @click="onSearch">查询</el-button>
      <el-button @click="onReset">重置</el-button>
      <el-button type="primary" @click="showAddDialog = true" style="margin-left: 20px;">预约会议</el-button>
    </div>

    <!-- 列表区域 -->
    <el-table :data="tableData" border style="width: 100%; margin-bottom: 16px;">
      <el-table-column prop="meetingReservationId" label="序号" width="60" align="center" />
      <el-table-column prop="startTime" label="会议时间" align="center" />
      <el-table-column prop="subject" label="会议名称" align="center" />
      <el-table-column prop="host" label="主持人" align="center" />
      <el-table-column prop="location" label="会议室" align="center" />
      <el-table-column prop="participants" label="参与人" align="center" />
      <el-table-column prop="content" label="会议内容" align="center" />
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button type="primary" link size="small" @click="onDetail(scope.row)">详情</el-button>
          <el-button type="primary" link size="small" @click="onEdit(scope.row)">修改</el-button>
          <el-button type="danger" link size="small" @click="onDelete(scope.row.meetingReservationId)">删除</el-button>
          <el-button type="primary" link size="small" @click="onSummary(scope.row)">会议纪要</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :total="totalCount"
      :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" @current-change="getList"
      @size-change="onSizeChange" background />

    <!-- 新增弹窗 -->
    <el-dialog v-model="showAddDialog" title="会议预约" width="700px">
      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="100px">
        <el-form-item label="会议模板" prop="template">
          <el-input v-model="addForm.template" />
        </el-form-item>
        <el-form-item label="会议主题" prop="subject">
          <el-input v-model="addForm.subject" />
        </el-form-item>
        <el-form-item label="会议地点" prop="location">
          <el-input v-model="addForm.location" />
        </el-form-item>
        <el-form-item label="主持人" prop="host">
          <el-input v-model="addForm.host" />
        </el-form-item>
        <el-form-item label="会议时间" required>
          <el-date-picker v-model="addForm.startTime" type="datetime" placeholder="开始时间" style="width: 180px;" />
          <span style="margin: 0 8px;">-</span>
          <el-date-picker v-model="addForm.endTime" type="datetime" placeholder="结束时间" style="width: 180px;" />
        </el-form-item>
        <el-form-item label="参与人" prop="participants">
          <el-input v-model="addForm.participants" />
        </el-form-item>
        <el-form-item label="会议内容" prop="content">
          <el-input v-model="addForm.content" type="textarea" />
        </el-form-item>
        <el-form-item label="会议口令" required>
          <el-radio-group v-model="addForm.isPasswordEnabled">
            <el-radio-button :label="true">开启</el-radio-button>
            <el-radio-button :label="false">关闭</el-radio-button>
          </el-radio-group>
          <div style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
            <el-input v-model="addForm.password" :disabled="!addForm.isPasswordEnabled" placeholder="请输入或生成会议口令"
              style="width: 180px;" clearable />
            <el-button @click="generatePassword" :disabled="!addForm.isPasswordEnabled" type="primary">随机生成</el-button>
            <el-button @click="copyPassword" :disabled="!addForm.isPasswordEnabled || !addForm.password"
              type="primary">复制口令</el-button>
          </div>
        </el-form-item>
        <el-form-item label="会议签到" required>
          <el-radio-group v-model="addForm.isSignInRequired">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="短信通知" required>
          <el-radio-group v-model="addForm.isSmsNotification">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否远程会议" required>
          <el-radio-group v-model="addForm.isRemoteMeeting">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="onAddSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="showEditDialog" title="编辑会议" width="700px">
      <el-form :model="editForm" ref="editFormRef" label-width="100px">
        <el-form-item label="会议模板" prop="template">
          <el-input v-model="editForm.template" />
        </el-form-item>
        <el-form-item label="会议主题" prop="subject">
          <el-input v-model="editForm.subject" />
        </el-form-item>
        <el-form-item label="会议地点" prop="location">
          <el-input v-model="editForm.location" />
        </el-form-item>
        <el-form-item label="主持人" prop="host">
          <el-input v-model="editForm.host" />
        </el-form-item>
        <el-form-item label="会议时间" required>
          <el-date-picker v-model="editForm.startTime" type="datetime" placeholder="开始时间" style="width: 180px;" />
          <span style="margin: 0 8px;">-</span>
          <el-date-picker v-model="editForm.endTime" type="datetime" placeholder="结束时间" style="width: 180px;" />
        </el-form-item>
        <el-form-item label="参与人" prop="participants">
          <el-input v-model="editForm.participants" />
        </el-form-item>
        <el-form-item label="会议内容" prop="content">
          <el-input v-model="editForm.content" type="textarea" />
        </el-form-item>
        <el-form-item label="会议口令" required>
          <el-radio-group v-model="editForm.isPasswordEnabled">
            <el-radio-button :label="true">开启</el-radio-button>
            <el-radio-button :label="false">关闭</el-radio-button>
          </el-radio-group>
          <div style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
            <el-input v-model="editForm.password" :disabled="!editForm.isPasswordEnabled" placeholder="请输入或生成会议口令"
              style="width: 180px;" clearable />
            <el-button @click="generateEditPassword" :disabled="!editForm.isPasswordEnabled"
              type="primary">随机生成</el-button>
            <el-button @click="copyEditPassword" :disabled="!editForm.isPasswordEnabled || !editForm.password"
              type="primary">复制口令</el-button>
          </div>
        </el-form-item>
        <el-form-item label="会议签到" required>
          <el-radio-group v-model="editForm.isSignInRequired">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="短信通知" required>
          <el-radio-group v-model="editForm.isSmsNotification">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否远程会议" required>
          <el-radio-group v-model="editForm.isRemoteMeeting">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="onEditSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog v-model="showDetailDialog" title="会议详情" width="700px">
      <el-card>
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="会议名称">{{ detailForm.subject }}</el-descriptions-item>
          <el-descriptions-item label="会议时间">{{ detailForm.startTime }} - {{ detailForm.endTime
            }}</el-descriptions-item>
          <el-descriptions-item label="会议地点">{{ detailForm.location }}</el-descriptions-item>
          <el-descriptions-item label="记录人">李四</el-descriptions-item>
          <el-descriptions-item label="主持人">{{ detailForm.host }}</el-descriptions-item>
          <el-descriptions-item label="决策人">王五</el-descriptions-item>
          <el-descriptions-item label="参会人员">
            <el-tag v-for="user in detailForm.participants.split(',')" :key="user" style="margin-right: 4px;">{{ user
              }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card style="margin-top: 20px;">
        <div class="section-title">会议内容</div>
        <el-input type="textarea" :rows="8" v-model="detailForm.content" readonly />
      </el-card>

      <el-card style="margin-top: 20px;">
        <div class="section-title">会议附件</div>
        <el-link :href="fileUrl" target="_blank" icon="el-icon-download">会议附件.zip</el-link>
      </el-card>

      <el-checkbox v-model="autoSend">保存成功后，自动通过邮件的方式将会议纪要发送给参会人员</el-checkbox>

      <div style="text-align: right; margin-top: 20px;">
        <el-button @click="showDetailDialog = false">取消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </el-dialog>

    <!-- 会议纪要弹窗 -->
    <el-dialog v-model="showSummaryDialog" title="会议纪要" width="900px">
      <el-card>
        <div style="font-weight: bold; font-size: 18px; margin-bottom: 16px;">会议纪要</div>
        <div style="margin-bottom: 16px;">
          <div style="font-weight: bold; color: #409EFF; margin-bottom: 8px;">| 基本信息</div>
          <div style="display: flex; flex-wrap: wrap;">
            <div style="width: 33%;">会议名称：{{ summaryForm.subject }}</div>
            <div style="width: 33%;">会议时间：{{ summaryForm.startTime }}</div>
            <div style="width: 33%;">会议地点：{{ summaryForm.location }}</div>
            <div style="width: 33%;">参会人员：
              <el-tag v-for="user in summaryForm.participants?.split(',')" :key="user" style="margin-right: 4px;">{{
                user
                }}</el-tag>
            </div>
            <div style="width: 33%;">主持人：{{ summaryForm.host }}</div>
            <div style="width: 33%;">记录人：{{ summaryForm.recorder }}</div>
            <div style="width: 33%;">决策人：{{ summaryForm.decisionMaker }}</div>
          </div>
        </div>
        <div style="font-weight: bold; color: #409EFF; margin-bottom: 8px;">| 会议内容</div>
        <div style="margin-bottom: 16px; white-space: pre-line;">{{ summaryForm.content }}</div>
        <div style="font-weight: bold; color: #409EFF; margin-bottom: 8px;">| 会议附件</div>
        <el-link :href="summaryForm.attachmentUrl" target="_blank" icon="el-icon-download">{{ summaryForm.attachmentName
          }}</el-link>
        <el-checkbox v-model="summaryForm.autoSend" style="margin-top: 16px;">
          保存成功后，自动通过邮件的方式将会议纪要发送给参会人员
        </el-checkbox>
        <div style="text-align: right; margin-top: 20px;">
          <el-button @click="showSummaryDialog = false">取消</el-button>
          <el-button type="primary" @click="onSummarySave">保存</el-button>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'

const tableData = ref([])
const totalCount = ref(0)
const pageIndex = ref(1)
const pageSize = ref(5)

const searchForm = reactive({
  subject: ''
})

const getList = async () => {
  const res = await axios.get('http://localhost:5161/api/MeetingReservation/GetApprove', {
    params: {
      PageIndex: pageIndex.value,
      PageSize: pageSize.value,
      subject: searchForm.subject
    }
  })
  if (res.data.code === 0) {
    tableData.value = res.data.data.data
    totalCount.value = res.data.data.totalCount
  }
}

const onSearch = () => {
  pageIndex.value = 1
  getList()
}
const onReset = () => {
  searchForm.subject = ''
  pageIndex.value = 1
  getList()
}
const onSizeChange = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1
  getList()
}

// 新增相关
const showAddDialog = ref(false)
const addFormRef = ref()
const addForm = reactive({
  template: '',
  subject: '',
  location: '',
  host: '',
  startTime: '',
  endTime: '',
  participants: '',
  content: '',
  isSignInRequired: false,
  isPasswordEnabled: false,
  password: '',
  isSmsNotification: false,
  isRemoteMeeting: false,
  isDeleteds: false
})
const addRules = {
  subject: [{ required: true, message: '请输入会议主题', trigger: 'blur' }],
  // 你可以继续补充其他校验
}
const onAddSubmit = () => {
  addFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const res = await axios.post('http://localhost:5153/api/MeetingReservation/Add', addForm)
      if (res.data.code === 0) {
        ElMessage.success('新增成功')
        showAddDialog.value = false
        getList()
      }
    }
  })
}

function generatePassword() {
  // 生成6位随机数字或字母
  addForm.password = Math.random().toString(36).slice(-6)
}

function copyPassword() {
  if (addForm.password) {
    navigator.clipboard.writeText(addForm.password)
    ElMessage.success('口令已复制')
  }
}

onMounted(getList)

//删除

const onDelete = (meetingReservationId: number) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put("http://localhost:5153/api/MeetingReservation/Del?MeetingReservationId=" + meetingReservationId).then((res) => {
        if (res.data.code == 0) {
          ElMessage.success("删除成功")
          getList()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

// 编辑相关
const showEditDialog = ref(false)
const editFormRef = ref()
const editForm = reactive({
  meetingReservationId: null,
  template: '',
  subject: '',
  location: '',
  host: '',
  startTime: '',
  endTime: '',
  participants: '',
  content: '',
  isSignInRequired: false,
  isPasswordEnabled: false,
  password: '',
  isSmsNotification: false,
  isRemoteMeeting: false,
  isDeleteds: false
})

function onEdit(row: any) {
  Object.assign(editForm, row)
  showEditDialog.value = true
}

function generateEditPassword() {
  editForm.password = Math.random().toString(36).slice(-6)
}

function copyEditPassword() {
  if (editForm.password) {
    navigator.clipboard.writeText(editForm.password)
    ElMessage.success('口令已复制')
  }
}

async function onEditSubmit() {
  // 校验并提交
  editFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const res = await axios.put('http://localhost:5153/api/MeetingReservation/Update', editForm)
      if (res.data.code === 0) {
        ElMessage.success('修改成功')
        showEditDialog.value = false
        getList()
      }
    }
  })
}

// 详情相关
const showDetailDialog = ref(false)
const detailForm = ref<any>({})
const fileUrl = ref('')
const autoSend = ref(false)

function onDetail(row: any) {
  detailForm.value = { ...row }
  showDetailDialog.value = true
}

function onSave() {
  // 实现保存逻辑
}

// 会议纪要相关
const showSummaryDialog = ref(false)
const summaryForm = ref<any>({
  subject: '',
  startTime: '',
  location: '',
  participants: '',
  host: '',
  recorder: '',
  decisionMaker: '',
  content: '',
  attachmentUrl: '',
  attachmentName: '',
  autoSend: true
})

function onSummary(row: any) {
  // 这里可以根据 row.meetingReservationId 请求会议纪要详情数据
  // 这里只做演示，实际应从后端获取
  summaryForm.value = {
    subject: row.subject,
    startTime: row.startTime,
    location: row.location,
    participants: row.participants,
    host: row.host,
    recorder: '李四', // 示例
    decisionMaker: '王五', // 示例
    content: row.content,
    attachmentUrl: 'http://xxx.com/会议附件.zip', // 示例
    attachmentName: '会议附件.zip',
    autoSend: true
  }
  showSummaryDialog.value = true
}

function onSummarySave() {
  // 这里实现保存逻辑，比如调用后端API
  ElMessage.success('保存成功')
  showSummaryDialog.value = false
}

</script>

<style>
/* 样式代码保持不变 */
</style>
